<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 地址栏显示 -->
    <link rel="Shortcut Icon" href="/images/hospital.png" type="image/x-icon"/>
    <!-- 收藏栏也显示 -->
    <link rel="Bookmark" href="/images/hospital.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<!-- 你的 HTML 代码 -->
<div class="layui-container">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-col-md4 layui-col-md-offset4">
            <legend>登录</legend>
            <div class="layui-field-box">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'layer', 'form'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;//表单验证（页面自动关联,验证结果绑定在表单）
        form.verify({
            email: function(value, item){ //value：表单的值、item：表单的DOM对象 自定义验证规则
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            } ,
            password:function(value,item){
                if(!/^.{3,12}$/img.test(value)){
                    return"密码必须位3~12位"
                }
            },
        });
        form.on('submit(login)', function(data){//用ajax时需要注意你的url接口、采用哪一种方式type获取，它的使用的哪种数据类型datatype
            var user = {
                email:$('input[name="email"]').val(),
                password:$('input[name="password"]').val()
            };
            $.ajax({
                url:'/dologin',
                type:'post',
                contentType: 'application/json',
                dataType:'json',
                data: JSON.stringify(user),
                beforeSend:function(){//弹出的lodinng层
                    layer.load(2,{
                        shade:[0.5,"#333"]
                    });
                },
                success:function(res){
                    if(res.status == 1){
            //res.code == 1,表示用户输入成功，0表示失败
            //获取用户输入的内容，存到本地存储，采用sessionStorage是因为用户只需输入一次，不需要保存，用户的体验感较好，也比较安全
            // sessionStorage.setItem('admin',JSON.stringify(res.data.admindata));
            //获取用户数据，并存储在本地。
            // sessionStorage.setItem('role',JSON.stringify(res.data.roledata));
            // sessionStorage.setItem('module',JSON.stringify(res.data.moduledata));
                        layer.msg("登录成功")
                        setTimeout(function(){//如果输入成功，可以跳到另一个你需要的界面
                            location.href="/main";
                        },2000)
                    }else{//不等于1时填出的内容
                        layer.msg(res.message)
                    }
                },
                error:function(){//用户输入与接口内容不对应，显示文字
                    layer.msg("网络繁忙，访问失败")
                },
                complete:function(){//关掉loading
                    layer.closeAll("loading")
                }
            })
            return false;//不会跳转到网址栏，只会跳转到你要的界面 一定要写。
        });
    });
</script>
</body>
</html>